<template>
  <view class="top-window">
    <el-header class="header">
      <div class="logo">管理系统</div>
      <div class="user-info">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            管理员<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
  </view>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.$confirm('确认退出登录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            uni.redirectTo({
              url: '/pages/login/login'
            })
          }).catch(() => {
            // 取消退出
          });
          break;
        case 'profile':
          this.$message('个人中心功能待开发');
          break;
        case 'settings':
          this.$message('设置功能待开发');
          break;
      }
    }
  }
}
</script>

<style scoped>
.top-window {
  background-color: #007AFF;
  color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20rpx;
}

.logo {
  font-size: 32rpx;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  color: white;
  cursor: pointer;
}
</style>